import React, { useState } from 'react';
import Layout from '../../components/Layout';
import Banner from '../../components/Banner';
import Card from '../../components/Card';

const locations = ['全部地区', '北京', '上海', '广州', '深圳', '杭州'];
const departments = ['全部部门', '研发部', '产品部', '设计部', '市场部', '运营部', '人力资源部'];

// 模拟职位数据
const allJobs = [
  {
    id: 1,
    title: '高级软件工程师',
    location: '北京',
    department: '研发部',
    link: '/careers/positions/1',
    isHighlighted: true,
  },
  {
    id: 2,
    title: '产品经理',
    location: '上海',
    department: '产品部',
    link: '/careers/positions/2',
  },
  {
    id: 3,
    title: 'UI/UX设计师',
    location: '广州',
    department: '设计部',
    link: '/careers/positions/3',
  },
  {
    id: 4,
    title: '前端开发工程师',
    location: '北京',
    department: '研发部',
    link: '/careers/positions/4',
  },
  {
    id: 5,
    title: '后端开发工程师',
    location: '深圳',
    department: '研发部',
    link: '/careers/positions/5',
  },
  {
    id: 6,
    title: '数据分析师',
    location: '杭州',
    department: '运营部',
    link: '/careers/positions/6',
  },
  {
    id: 7,
    title: '市场营销经理',
    location: '上海',
    department: '市场部',
    link: '/careers/positions/7',
  },
  {
    id: 8,
    title: 'HR招聘专员',
    location: '北京',
    department: '人力资源部',
    link: '/careers/positions/8',
  },
  {
    id: 9,
    title: '算法工程师',
    location: '北京',
    department: '研发部',
    link: '/careers/positions/9',
    isHighlighted: true,
  },
];

export default function Careers() {
  const [selectedLocation, setSelectedLocation] = useState('全部地区');
  const [selectedDepartment, setSelectedDepartment] = useState('全部部门');
  const [searchQuery, setSearchQuery] = useState('');

  // 过滤职位
  const filteredJobs = allJobs.filter((job) => {
    const matchesLocation = selectedLocation === '全部地区' || job.location === selectedLocation;
    const matchesDepartment = selectedDepartment === '全部部门' || job.department === selectedDepartment;
    const matchesSearch = !searchQuery || job.title.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesLocation && matchesDepartment && matchesSearch;
  });

  return (
    <Layout
      title="职位列表 - 凡科星悦"
      description="浏览凡科星悦的职位列表，加入我们的团队，一起创造未来。"
    >
      <Banner
        title="加入凡科星悦"
        subtitle="探索我们多样化的职位机会，成为推动技术创新的一员"
        backgroundImage="/images/careers-banner.jpg"
      />

      {/* Filter Section */}
      <section className="py-10 bg-white border-b">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            {/* 搜索框 */}
            <div className="w-full md:w-1/3">
              <div className="relative">
                <input
                  type="text"
                  placeholder="搜索职位..."
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <svg
                  className="absolute right-3 top-2.5 h-5 w-5 text-gray-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  ></path>
                </svg>
              </div>
            </div>

            {/* 下拉筛选 */}
            <div className="w-full md:w-2/3 flex flex-col sm:flex-row gap-4">
              <select
                className="w-full sm:w-1/2 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                value={selectedLocation}
                onChange={(e) => setSelectedLocation(e.target.value)}
              >
                {locations.map((location) => (
                  <option key={location} value={location}>
                    {location}
                  </option>
                ))}
              </select>

              <select
                className="w-full sm:w-1/2 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                value={selectedDepartment}
                onChange={(e) => setSelectedDepartment(e.target.value)}
              >
                {departments.map((department) => (
                  <option key={department} value={department}>
                    {department}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* Jobs List Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="mb-8">
            <h2 className="text-2xl font-bold text-gray-800">
              {filteredJobs.length > 0
                ? `找到 ${filteredJobs.length} 个匹配的职位`
                : '没有找到匹配的职位'}
            </h2>
          </div>

          {filteredJobs.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredJobs.map((job) => (
                <Card
                  key={job.id}
                  title={job.title}
                  location={job.location}
                  department={job.department}
                  link={job.link}
                  isHighlighted={job.isHighlighted}
                />
              ))}
            </div>
          ) : (
            <div className="bg-white rounded-lg shadow-md p-8 text-center">
              <svg
                className="mx-auto h-16 w-16 text-gray-400 mb-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                ></path>
              </svg>
              <p className="text-gray-600 mb-4">没有找到匹配的职位。</p>
              <p className="text-gray-600">请尝试调整筛选条件或搜索关键词。</p>
            </div>
          )}
        </div>
      </section>

      {/* Join Us Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-12">
              <h2 className="text-3xl font-bold text-gray-800 mb-4">为什么加入我们</h2>
              <p className="text-gray-600 mb-6">
                在凡科星悦，我们提供具有竞争力的薪资和福利，以及广阔的职业发展空间。我们重视团队合作和创新，鼓励员工不断学习和成长。
              </p>
              
              <div className="space-y-4">
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <svg className="h-5 w-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path>
                    </svg>
                  </div>
                  <div className="ml-3">
                    <h3 className="text-lg font-semibold text-gray-800">有竞争力的薪资和福利</h3>
                    <p className="text-gray-600">我们提供行业领先的薪资待遇和全面的福利计划。</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <svg className="h-5 w-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path>
                    </svg>
                  </div>
                  <div className="ml-3">
                    <h3 className="text-lg font-semibold text-gray-800">职业发展空间</h3>
                    <p className="text-gray-600">我们为员工提供多样化的职业发展路径和晋升机会。</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <svg className="h-5 w-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path>
                    </svg>
                  </div>
                  <div className="ml-3">
                    <h3 className="text-lg font-semibold text-gray-800">学习与成长</h3>
                    <p className="text-gray-600">我们鼓励员工不断学习，提供培训资源和学习机会。</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <svg className="h-5 w-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path>
                    </svg>
                  </div>
                  <div className="ml-3">
                    <h3 className="text-lg font-semibold text-gray-800">工作生活平衡</h3>
                    <p className="text-gray-600">我们重视员工的身心健康，提供灵活的工作安排。</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="md:w-1/2">
              <div className="grid grid-cols-2 gap-4">
                <div className="aspect-square rounded-lg overflow-hidden">
                  <div
                    className="w-full h-full bg-cover bg-center"
                    style={{ backgroundImage: "url('/images/office-1.jpg')" }}
                  ></div>
                </div>
                <div className="aspect-square rounded-lg overflow-hidden">
                  <div
                    className="w-full h-full bg-cover bg-center"
                    style={{ backgroundImage: "url('/images/office-2.jpg')" }}
                  ></div>
                </div>
                <div className="aspect-square rounded-lg overflow-hidden">
                  <div
                    className="w-full h-full bg-cover bg-center"
                    style={{ backgroundImage: "url('/images/team-1.jpg')" }}
                  ></div>
                </div>
                <div className="aspect-square rounded-lg overflow-hidden">
                  <div
                    className="w-full h-full bg-cover bg-center"
                    style={{ backgroundImage: "url('/images/team-2.jpg')" }}
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
} 